<template>
  <div class="virtual-list-box">
    <a-checkbox-group :value="value" @change="changeValueHandler">
      <RecycleScroller

        class="virtual-selector__scroller virtual-selector__dropdown"
        :items="codeListListF"
        :item-size="24"
        :key-field="nameKey"
      >

        <div v-if="codeListListF.length > 0" slot-scope="{ item }">

          <a-checkbox :value="item[valueKey]">
            <span v-if=" item[nameKey]==='All'" class="text-over">{{ item[nameKey] }}</span>
            <span v-else class="text-over">{{ item[nameKey]+' - '+item['name'] }}</span>
          </a-checkbox>

        </div>
        <div v-else class="c-empty-box">
          暂无数据
        </div>
      </RecycleScroller>

    </a-checkbox-group>

  </div>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller';
import { mapState, mapActions } from 'vuex';
export default {
  components: { RecycleScroller },
  model: {
    prop: 'value',
    event: 'changeValueHandler'
  },
  props: {
    mode: {
      type: String,
      default: 'multiple'
    },
    value: {
      type: [Array, String],
      default: () => []
    },
    width: {
      type: String,
      default: '148px'
    },
    valueKey: {
      type: String,
      default: 'name'
    },
    nameKey: {
      type: String,
      default: 'name'
    },
    maxTagCount: {
      type: Number,
      default: 1
    }
  },
  computed: {
    ...mapState('fraMonitoring', [
      'codeListLoading',
      'mmsgCodeListList'
    ]),
    codeListListF() {
      const list = this.mmsgCodeListList.flatMap(item => {
        return {
          name: item.faultName, value: item.code
        };
      });
      if (list.length > 0) {
        list.unshift({ name: 'All', value: 'All' });
      }
      return list;
    }
  },

  // watch: {
  //   value(nv, ov) {
  //     this.setValueHandler();
  //     this.$emit('changeValueHandler', nv);
  //   }
  // },
  async mounted() {
    await this.getMMSGCodeList();
    // this.setValueHandler();
  },
  methods: {
    ...mapActions('fraMonitoring', [
      'getMMSGCodeList'
    ]),
    changeValueHandler(nv) {
      if (nv.length > 1 && nv.includes('All')) {
        if (nv[0] === 'All') {
          nv.splice(0, 1);
        } else {
          nv = ['All'];
        }
      }
      this.$emit('changeValueHandler', nv);
    }
    // setValueHandler() {
    //   if (this.$refs.vSelector && this.$refs.vSelector.showValue) {
    //     if (this.mode !== 'multiple') {
    //       this.$refs.vSelector.showValue = this.codeListListF?.find(item => item[this.valueKey] === this.value)?.[this.nameKey];
    //     } else {
    //       const vA = [];
    //       this.value.forEach(element => {
    //         vA.push(this.codeListListF?.find(item => item[this.valueKey] === element)?.[this.nameKey]);
    //       });
    //       this.$refs.vSelector.showValue = vA;
    //     }
    //   }
    // }
  }

};
</script>

<style lang="less" scoped>
@import 'index.less';
</style>
